<template>
	<view class="content">
		<view class="nav">
			<image src="http://q79q98ocd.bkt.clouddn.com/back.png" @click="toPro()"></image>
			优惠券管理
		</view>
		<view class="manage">
			<xyzTab :tabList="tabList" :tabActiveIdx="tabActiveIdx" @tabSelect="tabSelect" :size="'32upx'"></xyzTab>	
		</view>
		<view class="bgcolor">
			<view v-if="tabListId=='0'"  v-for="(item,index) in managelist" :class="[item.tabListId==0?'manageTwo':'manageTwo manageTwos']" :key="index">
				<view class="price">{{item.price}}</view>
				<view class="order">{{item.order}}</view>
				<image :src="img" class="use use-two"></image>
				<view :class="[item.tabListId==0?'use':'']">{{item.use}}</view>
				<view class="time">{{item.time}}</view>
			</view>
			<view class="nomanage">没有更多优惠券</view>
		</view>
	</view>
</template>

<script>
import xyzTab from '@/components/xyz-tab/xyz-tab.vue'
export default {
	components:{
		xyzTab
	},
	data() {
		return{
			tabList: [
				{id: 0,label: '未使用'},
				{id: 1,label: '已使用'},
				{id: 2,label: '已过期'},
			],
			tabActiveIdx: 0,
			manageList: [
				{tabListId:0,price: '￥50',order: '订单满500减50元',use: '立即使用',time: '有效期至 2020-03-11'},
				{tabListId:0,price: '￥50',order: '订单满500减50元',use: '立即使用',time: '有效期至 2020-03-11'},
				{tabListId:1,price: '￥50',order: '订单满500减50元',time: '有效期至 2020-03-11'},
				{tabListId:1,price: '￥20',order: '订单满200减20元',time: '有效期至 2020-03-11'},
				{tabListId:2,price: '￥50',order: '订单满500减50元',time: '有效期至 2020-03-11'},
				{tabListId:2,price: '￥20',order: '订单满200减20元',time: '有效期至 2020-03-11'}
			],
			managelist:[],
			tabListId:0,	
			img:'',
			images:[
				{id:0,src:''},
				{id:1,src:'../../../static/img/used.png'},
				{id:2,src:'../../../static/img/past.png'}
			]
		}
	},
	onLoad:function(){
		this.tabSelect();
	},
	methods:{
		toPro(){
			uni.reLaunch({
				url: '../products'
			});
		},
		tabSelect(e){
			if(e==null){
			  e=0;
			}
			this.img=this.images[e].src;
			var len = this.manageList.length;
			this.managelist=[];
			for(var i=0;i<len;i++){
				if(this.manageList[i].tabListId==e){
					this.managelist.push(this.manageList[i]);
				}
			}
		}
	}
}
</script>

<style lang="scss">
.content{
	.nav{
		padding: 70upx 0 10upx 0;
		text-align: center;
		position: relative;
		border-bottom: #F00;
		font-size:36upx;
		font-weight:500;
		color: #333;
		image{
			width: 35upx;
			height: 35upx;
			vertical-align: middle;
			position: absolute;
			left: 30upx;
			bottom: 16.5upx;
		}
	}
	.bgcolor{
		background-color: #F6F6F6;
		height: 1410upx;
		padding-top: 10upx;
		.manageTwo{
			background-image: url("http://q79q98ocd.bkt.clouddn.com/youhuibg.png");
			background-size: 100% 260upx;
			width: 92%;
			height: 200upx;
			margin: 30upx auto;
			padding-top: 60upx;
			position: relative;
			.price,.order,.time{
				padding: 0 47upx;
				color: #fff;
				font-weight: 500;
			}
			.price{
				font-size: 36upx;
			}
			.order{
				font-size: 28upx;
				padding-top: 10upx;
			}
			.use{
				width:180upx;
				height:60upx;
				background:rgba(255,255,255,1);
				border-radius:30px;
				font-size: 28upx;
				font-weight: 500;
				color: #6AD390;
				text-align: center;
				line-height: 60upx;
				position: absolute;
				right: 40upx;
				top: 72upx;
			}
			.use-two{
				background: none;
				width: 126upx;
				height: 122upx;
				position: absolute;
				right: 40upx;
				top: 30upx;
			}
			.time{
				font-size: 24upx;
				padding-top: 54upx;
				text-align: center;
			}
		}
		.manageTwos{
			background-image: url("http://q79q98ocd.bkt.clouddn.com/yizhiyong.png");
			background-size: 100% 260upx;
			width: 92%;
			height: 200upx;
			margin: 20upx auto;
		}
		.nomanage{
			text-align: center;
			font-size: 26upx;
			color: #999;
			padding-top: 30upx;
		}
	}
}
</style>
